<div id="root">
    <h1>商品创建</h1>
    <qftable :state="false" ref="a"></qftable>
    <qftable :state="false"></qftable>
    <qftable :state="false"></qftable>
    <qftable :state="false"></qftable>
    <button @click="clickfn">表单外面的按钮</button>
    <qf-nav-bar  title="主页" @fh="fh" @sss="sss"></qf-nav-bar>
    <qfbutton type="primary" content="主要按钮"></qfbutton>
    <qfbutton type="info" content="信息按钮"></qfbutton>
    <qfbutton type="default" content="默认按钮"></qfbutton>
    <qfbutton type="warning" content="警告按钮"></qfbutton>
    <qfbutton type="danger" content="危险按钮"></qfbutton>
    <h1>loading1效果</h1>
    <qfloading1 :state='loading1state'></qfloading1>
    <button @click="loading1state = true">显示loading</button>
    <button @click="loading1state = false">隐藏loading</button>
    <h1>loading2效果</h1>
    <qfloading2 :state='loading2state' @close="loading2state=false"></qfloading2>
    <button @click="loading2state = true">显示loading</button>
    <h1>对话框</h1>
    <qfdialog @click="data => dialog=data" :value='dialog' title="用户创建"></qfdialog>
    <button @click="dialog=true">点击显示</button>
    <h1>分页组件</h1>
    <qfpage :total="10" :page-size="2" @pageclick="pageclickfn"></qfpage>


 
    <h1>表格</h1>
    <qfbiaoge :columns="userscolumns" :data="usersdata" ></qfbiaoge>



    <qfbiaoge :columns="goodscolumns" :data="goodsdata"></qfbiaoge>
    <h1>表格2</h1>
    <qf-table :data="tableData">
        <qf-table-column prop="id" label="编号1"></qf-table-column>
        <qf-table-column prop="id" label="编号2"></qf-table-column>
        <qf-table-column prop="name" label="姓名"></qf-table-column>
        <qf-table-column prop="age" label="年龄"></qf-table-column>
        <qf-table-column label="性别">
          <template slot-scope="item"> {{ item.sex == 1 ? '女' : '男' }} </template>
        </qf-table-column>
        <qf-table-column label="性别2">
          <template slot-scope="item"> {{ item.sex == 1 ? '女' : '男' }} </template>
        </qf-table-column>
      </qf-table>


</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="./qfui.css">
<script src="./qfui.js"></script>
<script>

const vm = new Vue({
    el: "#root",
    data: {
        loading1state:false,
        loading2state:false,
        dialog:false,
        tableData: [
        { id: 1, name: "张三", age: 3, sex: 1 },
        { id: 2, name: "赵四", age: 18, sex: 2 },
        { id: 3, name: "王五", age: 32, sex: 1 },
        { id: 4, name: "王五", age: 32, sex: 2 },
      ],
        userscolumns:[
            {title:"编号",key:"id"},
            {title:"姓名",key:"uname"},
            {title:"性别",key:'sex'},
            {title:"性别的另一种",key:"sex2",
            render:row=>`<b style="color:red">${row.sex2==1 ? "男" : "女"}</b>`,
        }
            // {title:"姓名",key:"uname"},
        ],
        usersdata:[
            {id:1,uname:"余其权",sex:"女",sex2:"2"},
            {id:2,uname:"王伦",sex:"男",sex2:"1"},
            {id:3,uname:"任耀楠",sex:"男",sex2:"1"},
        ],
        goodscolumns:[
            {title:"编号",key:"id"},
            {title:"商品名称",key:"title"},
            {title:"价格",key:"price"},
        ],
        goodsdata:[
            {id:1,title:"商品一",price:1.11},
            {id:2,title:"商品二",price:2.22},
            {id:3,title:"商品三",price:3.33},
            {id:4,title:"商品四",price:4.44},
        ]
    },
    methods:{
        clickfn(){
            alert(this.$refs.a.formdata.account)
        },
        fh(){
            alert('返回')
        },
        sss(){
            alert('搜索')
        },
        pageclickfn(num){
           alert(`您操作的第${num}页`);
        }
    },

})
</script>